<template>
  <div class="comtain">
    <!-- 头部 -->
    <div class="headers">
      <van-cell icon="arrow-left" class="header">
        <span slot="title" @click="changeshop">{{shopinfo.shop_name}}</span>
        <van-icon name="star-o" v-if="!isshoucang" @click="iscang"/>
        <van-icon name="star" v-else @click="iscang"/>
      </van-cell>
      <!-- 搜索框 -->
      <div class="search">
        <van-button plain type="info" @click="showsearch = true" block round icon="search" size="small" color="#f93e2e">搜索商品</van-button>
      </div>
    </div>
    <!-- 商品列表 -->
    <goodslist class="goodslist" :showsearch="showsearch" @closesearch="ji"></goodslist>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="phone-o" text="商家电话" color="#07c160" @click="phone"/>
      <van-goods-action-icon icon="coupon-o" text="领券" color="#ff5000" @click="showquan = true"/>
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsList.length" color="#f93e2e" @click="jiji"/>
      <van-goods-action-button type="danger" text="立即购买" @click="onClickButton"/>
    </van-goods-action>
    <!-- 商家电话 -->
    <van-dialog v-model="showphone" title="商家电话" confirmButtonColor="green" confirmButtonText="呼叫" show-cancel-button>
      <van-cell class="tanphone">
        <span slot="title" >
          <van-icon name="phone" class="iconphone"/>
          <span class="phonenum">{{shopinfo.shop_phone}}</span>
        </span>
      </van-cell>
    </van-dialog>
    <!-- 优惠券 -->
    <van-popup
      v-model="showquan"
      round
      class="tanquan"
      position="bottom"
      style="height: 65%; padding-top: 10px;"
    >
      <div class="title">商家优惠券</div>
      <van-search
        v-model="quankey"
        show-action
        shape="round"
        placeholder="请输入优惠码"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">兑换</div>
        </template>
      </van-search>
      <div class="quanbox">
        <div class="quaninfo">
          <div class="quanprice">
            <h4>100元</h4>
            <p>满10000元可用</p>
          </div>
          <div class="quanname">
            <h4>帅比专用券</h4>
          </div>
          <div class="quanget">
            <van-button type="danger" plain round @click="fn">点击领取</van-button>
          </div>
        </div>
        <div class="quanzhu">
          <span>备注：有效期 2020.10.10-2020.12.12</span>
        </div>
      </div>
      <div class="quanbox">
        <div class="quaninfo">
          <div class="quanprice">
            <h4>100元</h4>
            <p>满10000元可用</p>
          </div>
          <div class="quanname">
            <h4>帅比专用券</h4>
          </div>
          <div class="quanget">
            <van-button type="danger" plain round @click="fn">点击领取</van-button>
          </div>
        </div>
        <div class="quanzhu">
          <span>备注：有效期 2020.10.10-2020.12.12</span>
        </div>
      </div>
    </van-popup>
    <!-- 购物车弹窗 -->
    <van-popup class="tancar"  v-model="showcar" position="bottom" round :style="{ height: '70%' }">
      <div class="gou">我的购物车</div>
      <div v-if="goodsList.length === 0" class="nogoods">
        <van-icon name="cart-o" class="nogoodslogo"/><br>
        <van-button plain type="danger" @click="showcar = false">去购物</van-button>
      </div>
      <div class="card" v-else>
        <van-card
        v-for="(item,index) in goodsList"
        :key="index"
        :num="item.goods_amount"
        :price="item.goods_price"
        :title="item.goodsname"
        :thumb="item.goods_image"
      />
      </div>
      <van-goods-action>
        <div class="pricetext">总价:<span class="allprice">￥{{allprice}}</span></div>
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="onClickButton"
        />
      </van-goods-action>
    </van-popup>
  </div>
</template>

<script>
import goodslist from '@/components/goods-list'
import { getshopinfo } from '@/api/goods'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isshoucang: false,
      showphone: false,
      showquan: false,
      quankey: '',
      showcar: false,
      gouwuche: [],

      shopinfo: '',
      showsearch: false
    }
  },
  created () {
    this.loadshop()
  },
  computed: {
    ...mapState(['goodsList']),
    allprice() {
      var allprice = 0
      this.goodsList.forEach(item => {
        allprice += -item.goods_price * -item.goods_amount
      })
      return allprice
    }
  },
  components: {
    goodslist
  },
  mounted () {

  },
  methods: {
    async loadshop() {
      const res = await getshopinfo(this.$route.params.shopId)
      console.log(res)
      this.shopinfo = res.data.data
    },
    iscang() {
      this.isshoucang = !this.isshoucang
    },
    phone() {
      this.showphone = true
    },
    // 优惠券兑换
    onSearch() {
      if (!this.quankey) {
        this.$toast.fail('请输入兑换码')
      } else {
        this.$toast.fail('我怀疑你特么在乱输')
      }
    },
    onClickButton() {
      if (this.goodsList.length === 0) {
        return this.$toast.fail('你到底买啥')
      }
      this.$router.push(`/order-confirm/${this.$route.params.shopId}`)
    },
    fn() {
      this.$toast.fail('你不配')
    },
    changeshop() {
      this.$store.commit('setGoodsList', [])
      this.$router.push('/')
    },
    ji() {
      this.goodsList.push('')
      this.goodsList.pop()
      this.showsearch = false
    },
    jiji() {
      this.goodsList.push('')
      this.goodsList.pop()
      this.showcar = true
    }
  }
}
</script>

<style scoped lang="less">
.comtain {
  padding: 180px 0 100px 0;
  .headers{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100px;
    background-color: #fff;
    .header {
        background-color: #f93e2e;
        color: #fff;
        .van-icon{
          color: #fff;
          font-size: 40px;
        }
      }
  }
  .search {
    position: fixed;
    width: 100%;
    height: 70px;
    background-color: #fff;
    top: 100px;
    left: 0;
  }
  .goodslist {
    height: 100%;
  }
  .tanphone {
    text-align: center;
  }
  .iconphone {
    color: green;
    font-size: 30px;
    margin-right: 10px;
  }
  .title {
    text-align: center;
    font-size: 40px;
    color: #f93e2e;
  }
  .tanquan {
    padding: 0 20px;
    box-sizing: border-box;
  }
  .quanbox {
    width: 100%;
    height: 300px;
    border-radius: 30px;
    margin-bottom: 20px;
    background-color: #eee;
  }
  .card {
    width: 100%;
    height: 52vh;
    overflow-y: auto;
  }
  .quaninfo {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 250px;
    .quanprice {
      width: 200px;
      height: 100%;
      h4 {
        margin: 60px 0 0 0;
        font-size: 60px;
        text-align: center;
        color: #f93e2e;
      }
      p {
        font-size: 20px;
        text-align: center;
      }
    }
    .quanname {
       width: 300px;
       height: 100%;
       h4 {
         text-align: center;
         margin: 90px 0 0 0;
         font-size: 40px;
       }
    }
    .quanget {
      width: 200px;
      height: 250px;
      line-height: 250px;
      text-align: center;
    }
  }
  .quanzhu {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    padding-left: 30px;
  }
  .tancar {
    padding: 40px 20px 110px;
    box-sizing: border-box;
  }
  .gou {
    color: #f93e2e;
    text-align: center;
    padding-bottom: 20px;
  }
  .pricetext {
    padding: 0 20px;
    font-size: 40px;
  }
  .allprice {
    color: red;
  }
  .van-card__title {
    color: red;
    height: 100px;
    line-height: 90px;
    font-size: 40px;
  }
  .nogoods {
    text-align: center;
    margin-top: 200px;
    .nogoodslogo {
      font-size: 100px;
      color: #f93e2e;
    }
  }
}

</style>
